const React = require('react');
const {
    StyleSheet,
    View,
} = require('react-native');
const {
    JDRouter,
    JDTouchable,
    JDDevice,
    JDText,
    JDImage,
} = require('@areslabs/jdreact-core-lib');
const {
    Router,
    Route,
} = JDRouter;
const routes = require('./routes');
const UIIndex = require('./pages/UIIndex');
const ApiIndex = require('./pages/ApiIndex');
const SceneConfigs = Router.SceneConfigs;
const apiActive = require('./images/API_active.png')
const apiInactive = require('./images/API_inactive.png')
const componentActive = require('./images/component_active.png')
const componentInactive = require('./images/component_inactive.png')

class Navigation extends React.Component {
    render() {
        return (
            <Router
                location={'hash'}
                navigationBar={(<NavigationBar />)}>
                <Route key="uis" component={UIIndex} type="resetTo" sceneConfig={Router.SceneConfigs.None} />
                <Route key="apis" component={ApiIndex} sceneConfig={Router.SceneConfigs.None} />
                {Object.keys(routes).map(key => {
                    let tabRoutes = routes[key]
                    return tabRoutes && tabRoutes.map((item, index) => {
                        return item.pages && item.pages.map((sItem, sIndex) => {
                            return (
                                <Route
                                    key={`example-${sItem.id}`}
                                    component={sItem.component}
                                    sceneConfig={sItem.sceneConfig || SceneConfigs.PushFromRight}
                                />
                            )
                        })
                    })
                })}
            </Router>
        )
    }
}

class NavigationBar extends React.Component {
    state = {
        selectedTab: 'uis',
    };

    UNSAFE_componentWillReceiveProps(nextProps) {
        if (nextProps
            && nextProps.navState
            && nextProps.navState.routes
            && nextProps.navState.routes[nextProps.navState.index].routeName !== this.state.selectedTab
            && (nextProps.navState.routes[nextProps.navState.index].routeName === 'uis'
                || nextProps.navState.routes[nextProps.navState.index].routeName === 'apis')
        ) {
            this.setState({
                selectedTab: nextProps.navState.routes[nextProps.navState.index].routeName,
            })

        }

    }

    render() {
        const { navState, router } = this.props;
        if (!navState || !router) {
            return null;
        }
        const selectedTab = this.state.selectedTab;
        const { routes, index } = navState;
        const route = routes[index];
        if (route && route.routeName !== 'uis' && route.routeName !== 'apis') {
            return null;
        }
        return (
            <View style={styles.footer}>
                <JDTouchable style={[styles.footerItem, styles.firstItem]} onPress={() => {
                    selectedTab !== 'uis' && this.setState({
                        selectedTab: 'uis'
                    });
                    router.toUis();
                }}>
                    <View>
                        {selectedTab === 'uis'?
                        <JDImage style={styles.footerImg} source={componentActive} />:
                        <JDImage style={styles.footerImg} source={componentInactive} />}
                        <JDText style={selectedTab === 'uis' ? styles.selectedColor : null}>组件</JDText>
                    </View>

                </JDTouchable>

                <JDTouchable style={styles.footerItem} onPress={() => {
                    selectedTab !== 'apis' && this.setState({
                        selectedTab: 'apis'
                    })
                    router.toApis();
                }}>
                    <View>
                    {selectedTab === 'apis'?
                        <JDImage style={styles.footerImg} source={apiActive} />:
                        <JDImage style={styles.footerImg} source={apiInactive} />}
                        <JDText style={selectedTab === 'apis' ? styles.selectedColor : null}>API</JDText>
                    </View>

                </JDTouchable>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    footer: {
        height: JDDevice.getRpx(98),
        borderTopWidth: JDDevice.getDpx(1),
        borderTopColor: 'rgb(203,203,203)',
        flexDirection: 'row',
    },
    footerItem: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    firstItem: {
        borderRightWidth: JDDevice.getDpx(1),
        borderRightColor: 'rgb(203,203,203)'
    },
    selectedColor: {
        color: '#448BFF',
    },
    footerImg:{
        width:JDDevice.getRpx(48),
        height:JDDevice.getRpx(48),

    },
})

module.exports = Navigation;
